<template>
  <div class="monthAnalysis_wrap">
    <span class="mr-8">日期</span>
    <el-date-picker
      class="mr-8 update-el-date"
      v-model="dateTime"
      type="month"
      format="yyyy-MM"
      value-format="yyyy-MM"
      placeholder="选择日期"
    >
    </el-date-picker>
    <el-button type="primary" @click="handleSearch">查询</el-button>
    <div class="info_wrap">
      <div class="info_item">
        <div class="title">完成数量</div>
        <div class="number">{{ performanceList.complete || '-' }}</div>
      </div>
      <div class="info_item">
        <div class="title">业绩</div>
        <div class="number">{{ performanceList.salesAmount || '-' }}</div>
      </div>
      <div class="info_item">
        <div class="title">业绩达成率</div>
        <div class="number">{{ performanceList.achievementRate }}%</div>
      </div>
    </div>
    <div class="echarts_wrap">
      <!-- 第一个图表的图例 -->
      <div class="titrle_wrap">
        <div>
          <span class="item color_1"></span>
          <span>销售目标</span>
        </div>
        <div>
          <span class="item color_2"></span>
          <span>销售业绩</span>
        </div>
        <div>
          <span class="item color_3"></span>
          <span>达成率</span>
        </div>
      </div>
      <div class="rate_wrap" :style="{ width: leftEchartWidth + 'px' }">
        <!-- 第一季度 -->
        <template>
          <div class="item_1">
            <div class="rate">{{ achievementRate || 0 }}%</div>
            <div class="rate_1"></div>
          </div>
        </template>
      </div>
      <!-- <div class="leap" ref="achievementRateRef">
        <p>{{ performanceList.achievementRate }}%</p>
        <div class="color_4">&nbsp;</div>
      </div> -->
      <!-- <span class="span_1">111111</span> -->
      <!-- <div class="color_4" ref="achievementRateRef">&nbsp;</div> -->
      <div
        class="null_data_one"
        v-if="
          !performanceList.salesAmount &&
          !performanceList.sellTarge &&
          !performanceList.achievementRate
        "
      >
        暂无数据
      </div>
      <div id="leftEchart" ref="leftEchartRef" class="first"></div>
      <div
        class="null_data_two"
        v-if="
          performanceList.yearOnYearList &&
          performanceList.yearOnYearList.length === 0
        "
      >
        暂无数据
      </div>
      <div id="rightEchart" class="first"></div>
    </div>
  </div>
</template>

<script>
import { performanceVersion } from '@/request/store/K_PerformanceAnalysis'
import { getCurrentMonthLast, deepClone } from '@/util/util'
export default {
  name: 'monthAnalysis',
  data() {
    return {
      performanceList: {},
      dateTime: '',
      leftOption: {
        title: {
          text: '业绩达成率'
        },
        xAxis: {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            barWidth: 150,
            data: [],
            type: 'bar',
            color: '#017aff',
            barGap: 0.5,
            label: {
              normal: {
                show: true, //显示数字
                position: 'top', //这里可以自己选择位置
                color: '#000',
                formatter: (params) => {
                  let result = [],
                    counter = 0,
                    num = params.data
                  num = (num || 0).toString().split('')
                  for (let i = num.length - 1; i >= 0; i--) {
                    counter++
                    result.unshift(num[i])
                    if (!(counter % 3) && i != 0) {
                      result.unshift(',')
                    }
                  }
                  result = result.join('')
                  return result
                }
              }
            }
          },
          // {
          //   data: [],
          //   type: 'line',
          //   color: '#f19149',
          //   barGap: 0.5,
          //   size: 30,
          //   markPoint: {
          //     data: [{ type: 'max', name: 'Max' }]
          //   }
          // },
          {
            barWidth: 150,
            data: [],
            type: 'bar',
            color: '#67afff',
            label: {
              normal: {
                show: true, //显示数字
                position: 'top', //这里可以自己选择位置
                color: '#000',
                formatter: (params) => {
                  let result = [],
                    counter = 0,
                    num = params.data
                  num = (num || 0).toString().split('')
                  for (let i = num.length - 1; i >= 0; i--) {
                    counter++
                    result.unshift(num[i])
                    if (!(counter % 3) && i != 0) {
                      result.unshift(',')
                    }
                  }
                  result = result.join('')
                  return result
                }
              }
            }
          }
        ]
      }, // 左侧的图表配置
      rightOption: {
        title: {
          text: '业绩同比图'
        },
        xAxis: {
          width: '40',
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            barWidth: 150,
            data: [],
            type: 'bar',
            color: '#67afff',
            label: {
              normal: {
                show: true, //显示数字
                position: 'top', //这里可以自己选择位置
                color: '#000',
                formatter: (params) => {
                  let result = [],
                    counter = 0,
                    num = params.data
                  num = (num || 0).toString().split('')
                  for (let i = num.length - 1; i >= 0; i--) {
                    counter++
                    result.unshift(num[i])
                    if (!(counter % 3) && i != 0) {
                      result.unshift(',')
                    }
                  }
                  result = result.join('')
                  return result
                }
              }
            }
          }
        ]
      }, // 右侧的图表配置
      leftEchartWidth: 800,
      achievementRate: 0
    }
  },
  created() {
    let date = getCurrentMonthLast(false)
    date = date && date.split('-')
    let newDate = `${date[0]}-${date[1]}`
    this.dateTime = newDate
    this.performanceVersion(newDate)
  },
  mounted() {
    this.createLeftEchart()
    this.createRightChart()
    this.leftEchartWidth = this.$refs.leftEchartRef.clientWidth
  },
  methods: {
    // 请求数据
    async performanceVersion(month) {
      const { data } = await performanceVersion(month)
      if (data && data.code === 200) {
        this.performanceList = data.data
        this.setLeftOption()
        this.setRightOption()
      }
    },
    // 创建图表
    createLeftEchart() {
      let leftColumn = this.$echarts.init(document.getElementById('leftEchart'))
      leftColumn.setOption(this.leftOption)
    },
    // 创建图表
    createRightChart() {
      let leftColumn = this.$echarts.init(
        document.getElementById('rightEchart')
      )
      leftColumn.setOption(this.rightOption)
    },
    // 配置左侧的图表
    setLeftOption() {
      let dateTime = deepClone(this.dateTime)
      let option = deepClone(this.leftOption)
      let performanceList = deepClone(this.performanceList)
      let month = dateTime && dateTime.split('-')[1]
      option.xAxis.data.push(`${month}月`)

      // option.series[0].data.push(100)
      // option.series[1].data.push(56)
      // option.series[2].data.push(210)

      this.achievementRate = `${performanceList.achievementRate}`
      // console.log(achievementRate)
      option.series[0].data.push(performanceList.sellTarget)
      // option.series[1].data.push(achievementRate)
      option.series[1].data.push(performanceList.salesAmount)
      // console.log(option, 'option')
      this.leftOption = option
      this.createLeftEchart()
      // this.getLeftEchartRef()
      // console.log(this.leftOption)
    },
    // 配置右侧的图表
    setRightOption() {
      let option = deepClone(this.rightOption)
      let performanceList = deepClone(this.performanceList)
      if (performanceList.yearOnYearList.length) {
        let yearOnYearList = performanceList.yearOnYearList
        for (let i = 0; i < yearOnYearList.length; i++) {
          option.xAxis.data.push(yearOnYearList[i].year)
          option.series[i].data.push(yearOnYearList[i].salesAmount)
          this.rightOption = option
          this.createRightChart()
        }
      }
    },
    // 查询
    handleSearch() {
      let leftOption = deepClone(this.leftOption)
      let rightOption = deepClone(this.rightOption)
      leftOption.series[0].data = []
      leftOption.series[1].data = []
      // leftOption.series[2].data = []
      leftOption.xAxis.data = []
      rightOption.series[0].data = []
      rightOption.xAxis.data = []

      this.leftOption = leftOption
      this.rightOption = rightOption
      this.performanceVersion(this.dateTime)
    }
    // 左侧图表Dom
    // getLeftEchartRef() {
    //   let leftEchartRef = this.$refs.leftEchartRef
    //   let width = leftEchartRef.clientWidth
    //   let height = leftEchartRef.clientHeight
    //   this.setAchievementRate(width, height)
    // },
    // 业绩达成率Dom
    // setAchievementRate(width = 834, height) {
    //   let rate = 19 + Number(this.performanceList.achievementRate) // 达成率
    //   let achievementRate = this.$refs.achievementRateRef
    //   achievementRate.style.left = `${width / 2 - 25}px` // width/2,再减去自身一半
    //   achievementRate.style.bottom = `${rate}%`
    // }
  }
}
</script>

<style lang="less" scoped>
.null_data_one {
  position: absolute;
  top: 140px;
  left: 400px;
}
.null_data_two {
  position: absolute;
  top: 140px;
  left: 1200px;
}
.monthAnalysis_wrap {
  .info_wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    margin-top: 16px;
    height: 120px;
    border-radius: 10px;
    background-color: #f7f7f7;
    .info_item {
      // width: 120px;
      height: 80px;
      .title {
        margin-top: 13px;
        color: #959595;
      }
      .number {
        font-weight: 700;
        font-size: 20px;
        color: #017aff;
      }
    }
  }
  .echarts_wrap {
    margin-top: 25px;
    position: relative;
    width: 100%;
    height: 310px;
    // background: pink;
    display: flex;
    justify-content: space-between;
    .titrle_wrap {
      position: absolute;
      height: 20px;
      // background: pink;
      width: 500px;
      left: 10%;
      top: 0;
      display: flex;
      justify-content: center;
      div {
        display: flex;
        align-items: center;
        margin-right: 35px;
        span {
          font-size: 12px;
        }
        .item {
          border-radius: 50%;
          width: 10px;
          height: 10px;
          margin-right: 5px;
        }
        .color_1 {
          background-color: #017aff;
        }
        .color_2 {
          background-color: #67afff;
        }
        .color_3 {
          background-color: #f19149;
        }
      }
    }
    .rate_wrap {
      position: absolute;
      height: 50px;
      left: 0%;
      width: 800px;
      top: 42px;
      .item_1 {
        // width: 100px;
        text-align: center;
        margin-left: 30px;
        margin: 0 auto;
        // background-color: chartreuse;
      }
      .rate {
        // width: 20px;
        // height: 20px;
        font-size: 14px;
        color: #f19149;
      }
      .rate_1 {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin: 0 auto;
        background-color: #f19149;
      }
    }
    .leap {
      position: absolute;
      left: 100px;
      width: 50px;
      height: 40px;
      text-align: center;
      // background-color: #017aff;
      p {
        font-size: 14px;
        color: #f19149;
      }
      .color_4 {
        margin-top: 5px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        margin-left: 18px;
        background-color: #f19149;
      }
    }
    .span_1 {
      position: absolute;
      border-radius: 50%;
      // left: ;
      // bottom: 19%;
      width: 15px;
      height: 15px;
      margin-right: 5px;
      background-color: #f19149;
    }
    // .color_4 {
    //   position: absolute;
    //   border-radius: 50%;
    //   // left: ;
    //   // bottom: 19%;
    //   width: 15px;
    //   height: 15px;
    //   margin-right: 5px;
    //   background-color: #f19149;
    // }
    .first {
      width: 50%;
      height: 100%;
    }
  }
}
</style>
